<template>
  <div>
    <!-- 头部 -->
    <div style="border-bottom: 1px solid #e7e7e7">
      <shopping-header></shopping-header>
    </div>
    <div class="details-content flex">
      <!-- 左侧大图切换 -->
      <div class="change-images"></div>
      <!-- 右侧商品购买信息 -->
      <div class="goods-purchase">
        <div class="mb-2 goods-title">
          阿玛尼(Emporio Armani)手表 满天星镶钻时尚休闲钢带女表AR11129
        </div>
        <div
          style="width: 84%; line-height: 18px; font-size: 12px; color: #999"
        >
          璀璨表盘,简约两针设计,罗马数字
        </div>
        <div class="mt-3 mb-6"></div>
        <div class="goods-card">
          <!-- 售价 -->
          <div class="price-line flex">
            <h5>售价</h5>
            <div class="flex" style="color: #333">
              <span class="mr-1" style="font-size: 14px; vertical-align: 0"
                >¥</span
              >
              <span style="font-size: 30px; vertical-align: 0">2548</span>
            </div>
          </div>
          <!-- 服务 -->
          <div class="service-line flex items-start">
            <div class="flex items-center mr-3">
              <h5 class="mr-1">服务</h5>
              <p class="exclamatory-mark">!</p>
            </div>
            <div class="all-service flex flex-wrap">
              <div class="service-item" v-for="item in serviceData" :key="item">
                <a href="" class="service-icon"></a>
                <span style="margin-left: 8px; line-height: 16px">{{
                  item
                }}</span>
              </div>
              <div class="service-item">
                <a href="" class="service-icon"></a>
                <span style="margin-left: 8px; line-height: 16px"
                  >由重庆鑫恒时达电子商务有限公司发货并提供售后</span
                ><span class="merchant-qualification">查看商家资质</span>
              </div>
            </div>
          </div>
          <!-- 配送区域 -->
          <div class="delivery-area flex items-center">
            <h5>配送区域</h5>
            <div class="area-info">
              <span>北京 北京市 海淀区</span>
              <span>&nbsp;有货</span>
              <a class="ml-3 area-update" style="color: #666; cursor: pointer"
                >修改</a
              >
            </div>
          </div>
          <!-- 规格和数量 -->
          <div class="specifications-quantity">
            <div
              class="flex"
              style="
                overflow: hidden;
                padding: 0px 0px 12px;
                margin-bottom: 14px;
              "
            >
              <h5>规格</h5>
              <div
                style="
                  margin-bottom: -14px;
                  float: left;
                  width: 473px;
                  overflow: hidden;
                  cursor: pointer;
                "
              >
                <div
                  class="Specifications-item"
                  v-for="(item, index) in 8"
                  :key="index"
                  @click="showActive(index)"
                  :class="currentIndex === index ? 'active' : ''"
                >
                  AR1925
                </div>
              </div>
            </div>
            <!-- 数量 -->
            <div
              style="
                overflow: hidden;
                margin-bottom: 24px;
                background-color: pink;
              "
              class="goods-quantity"
            >
            <h5>数量</h5>
            <div>
              <div class="reduce-btn"></div>
              <input class="quantity-input" type="text">
              <div class="add-btn"></div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shoppingHeader from "@/views/shoppingMall/components/shopping-header.vue";
export default {
  components: { shoppingHeader },
  data() {
    return {
      serviceData: [
        "满69包邮",
        "三方店铺",
        "支持7天无理由退货 (拆封后不支持)",
        "慢必赔",
        "会员售后免邮",
      ],
      currentIndex: null,
    };
  },
  methods: {
    showActive(index) {
      this.currentIndex = index;
    },
  },
};
</script>


<style src="./css/goodsDetails.css" scoped>
</style>